<template>
    <div class="listBox">
        <div class = "box" v-if="Arr.length == 0">
            <img src="@/assets/images/null.png" alt="">
        </div>
        <div class = "box_show" v-if="Arr.length != 0">
            <div class ="list" 
                v-for = "(i,index) in Arr"
                :key ="index"
                @click="getGoods(index)"
            >
                <aside>
                    <div class = "img_box">
                        <img :src="i.image_url" alt="">
                    </div>
                </aside>
                <article>
                    <p class ="introduce"> 
                        {{ i.name }}
                    </p>
                    <p class = "num">
                        ￥{{ i.mktprice}}
                    </p>
                </article>
                <section>
                    <div class = "logo">
                        <img  v-if = "index !== num " src="@/assets/images/wxz.png" alt="">
                        <img  v-if = "index == num " src="@/assets/images/xz.png" alt="">
                    </div>
                </section>
            </div>
        </div>
        <div class ="submit" @click="submit">
            确认上传 
        </div>
    </div>
</template>

<script>
import qs from 'qs'
export default { 
    data(){
        return{
            // 获取商机下标值
            num:null,
            Arr:[],
        }
    },
    created(){
        // console.log(window.webkit)z
        // var a =  window.androidStub.getUserToken()
        // localStorage.setItem('user_token',a);
        // let where = {recommend: 1}
        let token = localStorage.getItem('user_token')
        this.$api.getShoper(token).then(res => { 
            this.Arr = res.data.list
            // console.log(res)
        })
    },
    methods:{
        getGoods(val){
            this.num = val;
            console.log(this.num)
        },
        submit(){
            if(this.num != null){
                //  console.log('http://mlshop.dongdukeji.com/wap/index.html#/goodsdetail?'+this.Arr[this.num].id);
                 let data = 'http://mlshop.dongdukeji.com/wap/index.html#/goodsdetail?goods_id='+this.Arr[this.num].id
                //  console.log(data)
                 this.testPlat(data)
                //  if(window.androidStub.getGoodsLink()){
                //      window.androidStub.getGoodsLink(data)
                //  }else if(window.webkit.messageHandlers.getBusinessLink.postMessage()){
                //      window.webkit.messageHandlers.getBusinessLink.postMessage(data)
                //  }
                //  this.$router.go(-1)
            }
        },
        testPlat(val){
            var u = navigator.userAgent;
            if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1){ //android终端
               window.androidStub.getGoodsLink(val)
                // return 0;
            }else if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //ios终端
                // return 1;
                window.webkit.messageHandlers.getBusinessLink.postMessage(val)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .box{
        img{
            width:50%;
            height:30%;
            position: fixed;
            top:20%;
            left:0;
            right:0;
            margin:auto auto;
        }
    }
    .listBox{
        padding-bottom:50px;
        width:100%;
        margin-top:10px;
        .list{
            padding:10px 10px;
            width:100%;
            height:100px;
            border-bottom:1px solid #eee;
            background: #fff;
            display: flex;
            aside{
                .img_box{
                    height:80px;
                    width:80px;
                    background:yellow;
                    margin-right:10px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
            article{
                flex:1;
                .introduce{
                    margin-top:10px;
                    width:200px;
                    text-align: left;
                    font-size:16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .num{
                    margin-top:10px;
                    text-align: left;
                    font-size:16px;
                    color:#FF8700;
                }
            }
            section{
                display: flex;
                align-items: center;
                .logo{
                    height:20px;
                    width:20px;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
        }
        .submit{
            width:100%;
            height: 40px;
            position: fixed;
            bottom:0px;
            margin:0px auto; 
            font-size:16px;
            line-height:40px;
            font-family: font_name;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background:#388FF0;
        }
    }
</style>

